<template>
  <view class="mine-container">
    <!-- 顶部背景图 -->
    <view class="top-bg">
      <image src="/static/mine-bg.png" mode="widthFix"></image>
    </view>
    
    <!-- 用户信息卡片（悬浮在背景上） -->
    <view class="user-card">
      <!-- 头像 -->
      <image 
        class="avatar" 
        :src="isLogin ? '/static/user-avatar.png' : '/static/default-avatar.png'"
        mode="widthFix"
      ></image>
      
      <!-- 未登录状态 -->
      <view class="user-info" v-if="!isLogin">
        <text class="welcome-text">未登录</text>
        <text class="tip-text">登录后可享受更多功能</text>
        <button class="login-btn" @click="goToLogin">立即登录</button>
      </view>
      
      <!-- 登录后状态 -->
      <view class="user-info" v-else>
        <text class="username">{{ currentUser.username }}</text>
        <text class="register-time">注册时间：{{ currentUser.registerTime }}</text>
        <button class="logout-btn" @click="handleLogout">退出登录</button>
      </view>
    </view>
    
    <!-- 功能菜单区 -->
    <view class="menu-container">
      <!-- 第一行菜单 -->
      <view class="menu-row">
        <view class="menu-item" @click="navigateTo('collect')" :class="{ disabled: !isLogin }">
          <image src="/static/menu-collect.png"></image>
          <text>我的收藏</text>
        </view>
        <view class="menu-item" @click="navigateTo('history')">
          <image src="/static/liulan.png"></image>
          <text>浏览历史</text>
        </view>
        <view class="menu-item" @click="navigateTo('message')" :class="{ disabled: !isLogin }">
          <image src="/static/message.png"></image>
          <text>消息通知</text>
        </view>
      </view>
      
      <!-- 第二行菜单 -->
      <view class="menu-row">
        <view class="menu-item" @click="navigateTo('setting')">
          <image src="/static/setting.png"></image>
          <text>设置</text>
        </view>
        <view class="menu-item" @click="navigateTo('feedback')">
          <image src="/static/feedback.png"></image>
          <text>意见反馈</text>
        </view>
        <view class="menu-item" @click="navigateTo('about')">
          <image src="/static/about.png"></image>
          <text>关于我们</text>
        </view>
      </view>
    </view>
    
    <!-- 数据统计区（登录后显示） -->
    <view class="stats-container" v-if="isLogin">
      <view class="stats-item">
        <text class="stats-num">3</text>
        <text class="stats-text">关注</text>
      </view>
      <view class="stats-item">
        <text class="stats-num">0</text>
        <text class="stats-text">话题</text>
      </view>
      <view class="stats-item">
        <text class="stats-num">12</text>
        <text class="stats-text">收藏</text>
      </view>
      <view class="stats-item">
        <text class="stats-num">56</text>
        <text class="stats-text">浏览</text>
      </view>
    </view>
    
    <!-- 红包活动区 -->
    <view class="red-packet" v-if="!isLogin">
      <image src="/static/red-packet-icon.png"></image>
      <text class="red-packet-text">新用户专享</text>
      <text class="red-packet-desc">登录即领30元现金红包</text>
      <button class="grab-btn" @click="goToLogin">立即领取</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false, // 登录状态
      currentUser: {} // 当前登录用户信息
    };
  },
  onShow() {
    // 页面显示时刷新登录状态
    this.refreshLoginStatus();
  },
  methods: {
    // 刷新登录状态（与缓存同步）
    refreshLoginStatus() {
      const isLogin = uni.getStorageSync('isLogin');
      const currentUser = uni.getStorageSync('currentUser');
      
      this.isLogin = isLogin && !!currentUser;
      this.currentUser = currentUser || {};
      
      // 同步更新TabBar文字
      uni.setTabBarItem({
        index: 3, // 第4个Tab
        text: this.isLogin ? "我的" : "未登录",
        iconPath: this.isLogin ? "/static/mine.png" : "/static/mine.png",
        selectedIconPath: this.isLogin ? "/static/mine-selected.png" : "/static/mine-selected.png"
      });
    },
    // 跳转到登录页
    goToLogin() {
      uni.navigateTo({
        url: "/pages/login/login"
      });
    },
    // 退出登录
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        confirmText: '退出',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            // 清除登录状态缓存
            uni.removeStorageSync('isLogin');
            uni.removeStorageSync('currentUser');
            // 刷新状态
            this.refreshLoginStatus();
            // 提示
            uni.showToast({ title: '退出成功', icon: 'success', duration: 1200 });
          }
        }
      });
    },
    // 跳转到对应功能页（未登录时提示登录）
    navigateTo(page) {
      if (!this.isLogin) {
        uni.showToast({ title: '请先登录', icon: 'none', duration: 1500 });
        setTimeout(() => {
          this.goToLogin();
        }, 1500);
        return;
      }
      
      // 跳转逻辑（根据page参数跳转不同页面，这里仅做示例）
      const pageMap = {
        collect: "/pages/mine/collect/collect",
        history: "/pages/mine/history/history",
        message: "/pages/mine/message/message",
        setting: "/pages/mine/setting/setting",
        feedback: "/pages/mine/feedback/feedback",
        about: "/pages/mine/about/about"
      };
      
      if (pageMap[page]) {
        uni.navigateTo({ url: pageMap[page] });
      }
    }
  }
};
</script>

<style scoped>
.mine-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

/* 顶部背景图 */
.top-bg {
  width: 100%;
  height: 220rpx;
  overflow: hidden;
}

.top-bg image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 用户信息卡片 */
.user-card {
  width: 90%;
  margin: -60rpx auto 0;
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 30rpx;
  position: relative;
  z-index: 10;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 4rpx solid #fff;
  object-fit: cover;
}

.user-info {
  flex: 1;
}

.welcome-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.tip-text {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-bottom: 20rpx;
}

.username {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.register-time {
  font-size: 22rpx;
  color: #999;
  display: block;
  margin-bottom: 20rpx;
}

.login-btn {
  background: linear-gradient(90deg, #FF6B6B 0%, #FF8E8E 100%);
  color: #fff;
  padding: 8rpx 24rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
}

.logout-btn {
  background: #f5f5f5;
  color: #FF6B6B;
  padding: 8rpx 24rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  border: 1rpx solid #eee;
}

/* 功能菜单区 */
.menu-container {
  width: 90%;
  margin: 40rpx auto 0;
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
}

.menu-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30rpx;
}

.menu-row:last-child {
  margin-bottom: 0;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
  width: 25%;
}

.menu-item image {
  width: 56rpx;
  height: 56rpx;
  object-fit: contain;
}

.menu-item text {
  font-size: 24rpx;
  color: #333;
}

.menu-item.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* 数据统计区 */
.stats-container {
  width: 90%;
  margin: 30rpx auto 0;
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-around;
}

.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stats-num {
  font-size: 36rpx;
  font-weight: bold;
  color: #FF6B6B;
  margin-bottom: 5rpx;
}

.stats-text {
  font-size: 24rpx;
  color: #666;
}

/* 红包活动区 */
.red-packet {
  width: 90%;
  margin: 30rpx auto 0;
  background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
  border-radius: 20rpx;
  padding: 25rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  color: #fff;
}

.red-packet image {
  width: 60rpx;
  height: 60rpx;
  object-fit: contain;
}

.red-packet-text {
  font-size: 28rpx;
  font-weight: bold;
  display: block;
}

.red-packet-desc {
  font-size: 22rpx;
  opacity: 0.9;
  display: block;
  margin-top: 5rpx;
}

.grab-btn {
  margin-left: auto;
  background: #fff;
  color: #FFA500;
  padding: 8rpx 24rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  font-weight: 500;
}
</style>